<template>
  <div class="b">
    <h2>B 组件</h2>
    <h4>{{ Flag }}</h4>
  </div>
</template>

<script setup lang="ts">
import mittBus from "./mitt";
import { ref, onBeforeUnmount } from "vue";

const Flag = ref(false);

// 监听单个
mittBus.on("on-click", (flag: boolean) => {
  console.log(flag);
  Flag.value = flag;
});

// 一次性监听多个
mittBus.on("*", (type, value: boolean) => {
  switch (type) {
    case "on-click":
      Flag.value = value;
      break;
  }
});

onBeforeUnmount(() => {
  // 清除单个事件
  mittBus.off("on-click");

  // 清除一次性事件
  mittBus.off("*");

  // 清除所有事件
  mittBus.all.clear();
});
</script>

<style scoped>
.b {
  width: 100%;
  height: 100px;
  background-color: yellowgreen;
  margin-top: 10px;
}
</style>
